<template>
  <div class="banxin2">
    <div class="title">
      <span class="all">{{ cat }}</span>
      <span class="hot">热门</span>
    </div>
    <div class="content">
      <SongCard v-for="item in playList"
                :key="item.id"
                :Song="item">
        <template slot="author">
          <div class="temp">
            <i>by</i>
            <span>云音乐歌单</span>
          </div>
        </template>
      </SongCard>
    </div>
    <div class="page">
      <el-pagination background
                     layout="prev,pager,next"
                     :total="total"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     @current-change="currentChange"
                     @prev-click="prevClick"
                     @next-click="nextClick"></el-pagination>
    </div>
  </div>
</template>

<script>
import { playList_hot } from '@/assets/js/request'
import SongCard from '@/components/SongCard.vue'
export default {
  components: {
    SongCard,
  },
  data() {
    return {
      playList: [{ id: 0, name: '', playCount: 0, coverImgUrl: '' }],
      //当前页
      currentPage: 1,
      //每页的数量
      pageSize: 35,
      //分类
      cat: '全部',
      //总条数
      total: 0,
    }
  },
  created() {
    if (this.$route.query.cat) {
      this.cat = this.$route.query.cat
    }
    this.currentChange(this.currentPage)
  },
  methods: {
    currentChange(index) {
      if (index != this.currentPage) {
        this.currentPage = index
      }
      playList_hot({
        limit: this.pageSize,
        order: 'hot',
        offset: (this.currentPage - 1) * this.pageSize,
        cat: this.cat,
      }).then((res) => {
        if (res.code == 200) {
          this.cat = res.cat
          this.total = res.total
          let arry = []
          res.playlists.forEach((item) => {
            let { id, name, playCount, coverImgUrl } = item
            arry.push({ id, name, playCount, coverImgUrl })
          })
          this.playList.splice(0, this.playList.length)
          this.playList = arry
        }
      })
    },
    prevClick() {
      if (this.currentPage == 1) return
      this.currentPage--
    },
    nextClick() {
      if (this.currentPage == this.total) return
      this.currentPage++
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/assets/css/base.less';
.banxin2 {
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  .title {
    text-align: left;
    border-bottom: 2px solid #c20c0c;
    height: 40px;
    width: 100%;
    line-height: 42px;
    margin-bottom: 20px;
    .all {
      font-size: 24px;
      color: #333;
    }
    .hot {
      width: 46px;
      height: 29px;
      color: #fff;
      border: 0;
      font-size: 12px;
      background: url(@/assets/image/button.png) no-repeat 0 9999px;
      border-radius: 3px;
      background-position: 0 0;
      float: right;
      line-height: 29px;
      text-align: center;
    }
  }
  .content {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 60px;
    row-gap: 20px;
    .temp {
      font-size: 12px;
      i {
        margin-right: 5px;
      }
    }
  }
  .page {
    margin-top: 20px;
  }
}
</style>